<template>
    <div class="page">
        <div class="header">
            <div class="name">
                项目名称
            </div>
            <div class="year">
                年度
            </div>
            <div class="status">
                状态
            </div>
            <div class="btn">
<!--                <a-button class="monitor" type="primary" @click="showFn" :loading="loading" :disabled="loading">{{ showComputed ? '隐藏' : '显示' }}</a-button>-->
                <div class="operate">
                    操作
                </div>
            </div>
        </div>
        <div class="main">
            <div class="item" v-for="(item, index) in datas" :key="index">
                <div class="name" :title="item[field]">
                    {{ item[field] }}
                </div>
                <div class="year">
                    {{ item.year }}
                </div>
                <div class="status" :title="item.auditType_dictText">
                    {{ item.auditType_dictText }}
                </div>
                <div class="show">
                    <span class="btn" @click="position(item)">
                        {{ item.zlcShow ? '隐藏' : '显示' }}
                    </span>
                    <span class="btn" @click="details(item)">
                        详情
                    </span>
                </div>
            </div>
            <zlc-nodata v-if="!datas || !datas.length"></zlc-nodata>
        </div>
    </div>
</template>

<script>
import {computed, ref, watch} from "vue";
import zlcNodata from "../../../components/zlcNodata/zlcNodata.vue";
export default {
    name: "assetProjectManage",
    components: {
        zlcNodata

    },
    props:{
        datas:{
            type: Array,
            default(){
                return []
            }
        },
        field:{
            type:String,
            default(){
                return 'monitorName'
            }
        },
        btnText:{
            type: String,
            default(){
                return '定位'
            }
        }
    },
    setup(props, ctx){
        let loading = ref(false)
        let showComputed = ref(false)
        //一键显示-隐藏
        let showFn = () => {
            ctx.emit('change', showComputed.value)
            loading.value = false

            if(showComputed.value){
                props.datas.forEach(i => {
                    i.zlcShow = false
                })
            }else{
                props.datas.forEach(i => {
                    i.zlcShow = true
                })
            }

        }
        //显示所有
        let showAll = () => {
            props.datas.forEach(i => {
                i.zlcShow = true
            })

            loading.value = false
        }

        //隐藏
        let hidden = () => {
            loading.value = false
            showComputed.value = false
        }

        //显示单个
        let position = (item) => {
            props.datas.forEach(i => {
                if(i.id != item.id){
                    i.zlcShow = false

                }else{
                    i.zlcShow = !i.zlcShow
                }
            })
            ctx.emit('position', item.id, item.zlcShow, props.datas)
        }

        //详情
        let details = (item) => {
            ctx.emit('details', item)
        }

        watch(() => props.datas, (newVal, oldVal) => {
            if(newVal.length){
                showComputed.value = props.datas.some(item => {
                    return item.zlcShow == true
                })
            }

        },{ deep: true, immediate: true })
        return {
            showFn,
            loading,
            showComputed,
            position,
            details,
            hidden,
            showAll
        }
    }
}
</script>

<style scoped lang="less">
.page {
    width: 100%;
    height: 100%;
    color: #fff;
    padding-top: 10px;
    box-sizing: border-box;

    .header{
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background: url("/src/assets/titlebcg.png") center center no-repeat;
        background-size: 100% 100%;
        padding: 0 10px 0 20px;
        box-sizing: border-box;
        font-size: 14px;
        .name{
            width: 26%;
            text-align: center;
        }
        .year{
            width: 24%;
            text-align: center;
        }
        .status{
            width: 26%;
            text-align: center;
            .monitor{
                height: 30px;
            }
            .ant-btn-primary[disabled],.ant-btn-primary[disabled]:hover {
                color: #ffffff !important;
            }
        }
        .btn{
            width: 24%;
            text-align: center;
            /*覆盖ant-design-vue 样式**/
            .ant-btn-primary[disabled],.ant-btn-primary[disabled]:hover {
                color: #ffffff !important;
            }
        }
    }
    .main{
        width: 100%;
        height: calc(100% - 40px);
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.05);
        /* 滚动条优化 start */
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        /* 无内容时的滚动条样式 */
        &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgb(64, 128, 230);
            border-radius: 4px;
            background: rgba(117, 207, 239, 0.1);
        }

        /* 有内容时的滚动条样式 */
        &::-webkit-scrollbar-thumb {
            background: rgb(9, 108, 222);
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: rgba(72, 136, 234, 0.8);
        }

        &::-webkit-scrollbar-corner {
            background: rgba(0, 0, 0, 0.1);
        }

        /* 滚动条优化 end */
        .item{
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #4579c7;
            font-size: 14px;
            .name{
                width: 26%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
            }
            .year, .status{
                width: 24%;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .show{
                width: 26%;
                font-size: 14px;
                cursor: pointer;
                text-align: center;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .btn{
                    width: fit-content;
                    height: fit-content;
                    padding: 2px 4px;
                    background: rgba(0, 160, 255, .5);
                    border-radius: 4px;
                    margin: 0 auto;
                }
            }
        }
    }
}
</style>
